<template>
    <!--单个店铺-->
    <div id="store">
        <!--顶部-->
        <div id="head">
            <div id="headbox">
                <div id="headtop"><!--上部分-->
                    <img src="../image/store/4e708671b1c5c264.png" alt="">
                    <div id="headtopRight">
                        <p>
                            <span>沃尔玛-新街口店</span>
                            <I></I>
                        </p>
                        <p>达达专送  ·60分钟</p>
                        <p>基础运费4元</p>
                    </div>                   
                </div>
                <div id="headtopBotton"><!--下部分-->
                    <p id="headtopBottonLeft">
                        <span>满减</span>
                        <span>联合利华洗护满88减12</span>
                    </p>
                    <p id="headtopBottonRight">
                        <span>13种优惠</span>
                        <span></span>
                    </p>
                </div>
            </div>
        </div>
        <!--搜索框-->
        <div id="search">
            <div id="searchbox">
                <span></span>
                <input type="text" placeholder="搜索店内商品，共2271件好物">
                <span></span>
            </div>
        </div>
        <!--图片-->
        <div id="img">
            <img src="../image/store/85d279d50be173cb.png" alt="">
        </div>
        <!--选项卡-->
        <Shop></Shop>
        <SideNavigation></SideNavigation>
    </div>
</template>
<script>
    import $ from 'jquery';
    export default {
        
    }
</script>
<style scoped lang="scss">
//单个店铺页面
    *{
        margin:0;
        padding:0;
        list-style-type:none;
        text-decoration:none;
    }

//顶部 
    #head{
        width:750px;
        height:232px;
        padding-top:16px;

        //顶部box
        #headbox{
            width:710px;
            height:198px;
            padding:4px 20px 30px 20px;

            #headtop{
                width:710px;
                height:140px;
                margin-bottom:30px;
                display:flex;
                justify-content:space-between;
                //左边的图片
                img{
                    display:block;
                    width:136px;
                    height:136px;
                    padding:0 2px;
                    background-repeat:no-repeat;
                    background-size:100% 100%;
                }
                //右边的文字
                #headtopRight{
                   width:554px;
                   height:140px;
                
                    //第一层
                    P:nth-of-type(1){
                       width:570px;
                       height:62px;
                       display:flex;

                        span{
                            font-size:35px;
                            font-weight:550;
                            color:#222;
                            width:494px;
                            height:62px;
                            display:block;
                        }
                        i{
                            display:block;
                            width:60px;
                            height:60px;
                            background-image:url(../image/store/focus.png);
                            background-repeat:no-repeat;
                            background-size:146px auto;
                        }
                   }
                   //第二层
                    P:nth-of-type(2){
                        width:418px;
                        height:30px;
                        padding-right:136px;
                        margin-bottom:18px;
                        font-size:24px;
                        line-height:30px;
                    }
                    //第三层
                    P:nth-of-type(3){
                        width:418px;
                        height:30px;
                        padding-right:136px;
                        font-size:24px;
                        line-height:30px;
                    }
                }
            }
        }
        //头部底部部分
        #headtopBotton{
            width:710px;
            height:28px;
            margin-top:20px;
            display:flex;
            
            //左边
            #headtopBottonLeft{
                width:320px;
                height:28px;
                display:flex;

                span:nth-of-type(1){
                    display:block;
                    width:50px;
                    height:28px;
                    background-color:#55D85E;
                    color:#fff;
                    font-size:24px;
                    text-align:center;
                    line-height:28px;
                    border-radius:5px 2px;
                    white-space:nowrap;
                }
                span:nth-of-type(2){
                    display:block;
                    width:260px;
                    height:28px;
                    margin-left:10px;
                    line-height:28px;
                    font-size:24px;
                    color:#666;
                    white-space:nowrap;
                }
            }
            //右边
            #headtopBottonRight{
                width:414px;
                height:28px;
                display:flex;
                justify-content:flex-end;
                
                span:nth-of-type(1){
                    width:120px;
                    height:28px;
                    display:block;
                    font-size:24px; 
                    color:#666;                 
                }
                span:nth-of-type(2){
                    width:20px;
                    height:11px;
                    margin:10px 0 0 5px;
                    display:block;
                    background-image:url(../image/home/icon_arrow_down.png);
                    background-repeat:no-repeat;
                    background-size:100% 100%; 
                }
            }
        }
    }
//搜索框
    #search{
        width:750px;
        height:80px;

        #searchbox{
            width:710px;
            height:50px;
            padding:10px 20px 20px 20px;
            position:relative;

            input{
                width:616px;
                height:60px;
                display:block;
                border:none;
                border-radius:50px;
                outline:0;
                background-color:rgb(243, 240, 240);
                font-size:30px;
                line-height:60px;
                text-indent:54px;
            }
            input::-webkit-input-placeholder{
                color:#999;
            }
            input::-moz-placeholder{   /* Mozilla Firefox 19+ */
                color:#999;
            }
            input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
                color:#999;
            }
            input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
                color:#999;
            }

            span:nth-of-type(1){
                display:block;
                width:28px;
                height:32px;
                background-image:url(../image/home/icon_swich.png);
                background-repeat:no-repeat;
                background-size:100% 100%;
                position: absolute;
                top:25px;
                left:40px;
            }
             span:nth-of-type(2){
                 display:block;
                 width:94px;
                 height:60px;
                 background-image:url(../image/store/groupCopy.png);
                 background-repeat:no-repeat;
                 background-size:100% 100%;
                 position: absolute;
                 right:0;
                 bottom:5px;
             }
        }
    }
//图片
    #img{
        width:750px;
        height:256px;

        img{
            display:block;
            width:710px;
            height:236px;
            padding:0 20px 20px 20px;
            background-repeat:no-repeat;
            background-size:100% 100%;
        }
    }
//选项卡
    #TAB{
        width:750px;
        display:flex;
        //左边的分类
        #TABleft{
            width:160px;
            height:1094px;
            padding-bottom:160px;
            overflow-y: scroll;
            overflow-x: hidden;

           li{
                display:block;
                width:112px;
                height:92px;
                padding:4px 24px;
                font-size:28px;
                line-height:92px;
                color:#666;
                background-color:rgb(245, 245, 245);
                border-bottom:none;
                white-space:nowrap;

                    /*ul{
                        width:590px;                        
                        
                        li{
                            width: 590px;
                            height:72px;
                            display:block;
                        }
                    }*/
           }
           li:hover{
               font-weight:600;
               color:#333;
               background-color:#fff;
           }
        }
        //右边的详情
        #TABright{
            width:590px;
            //顶部的秒杀和直降
            #TABrightTop{
                width:570px;
                margin-left:20px;
                display:flex; 
                a{
                        display:block;
                        width: 56px;
                        height:72px;
                        padding-right:28px;
                        font-size:28px;
                        line-height:72px;
                        color:#666;
                        white-space:nowrap;
                    }
                    a:hover{
                        color:#47B34F;
                        font-weight:600;
                    }
            }
            //包裹秒杀和直降的页面
            #choose{
                
                //秒杀页面
                #kill{
                    width:570px;
                    margin-left:20px;
                    
                    //中间的秒杀，销量和价格
                    li:nth-of-type(1){
                        display:block;
                        width:570px;
                        height:60px;
                        display:flex;
                        padding-left:0;

                        span{
                            font-size:24px;
                            color:#666;
                            display:block;
                            height:60px;
                            
                        }
                        //秒杀
                        span:nth-of-type(1){
                            width:400px;
                            line-height:60px;                        
                        }
                        //销量
                        span:nth-of-type(2){
                            font-weight:540;
                            width:76px;
                            padding:14px;
                            text-align:center;
                        }
                        //价格
                        span:nth-of-type(3){
                            width:94px;
                            padding:14px;
                            display:flex;
                            //价格后面的上下箭头
                            i{
                                display:block;
                                width:14px;
                                height:20px;
                                background-image:url(../image/store/normal_price.png);
                                background-repeat:no-repeat;
                                background-size:100% 100%;
                                margin-top:5px;
                            }
                        }
                    }
                    //商品信息
                    li:nth-of-type(2){
                        display:block;
                        width:570px;
                        height:400px;
                        overflow-y: scroll;
                        overflow-x: hidden; 

                        a{
                            display:block;
                            width:550px;
                            height:210px;
                            overflow-y: scroll;
                            overflow-x: hidden; 
                            padding:30px 20px 30px 0;
                            display:flex;
                            //左边的图片
                            img{
                                display:flex;
                                width:130px;
                                height:130px;
                                background-repeat:no-repeat;
                                background-size:100% 100%;

                            }
                            //右边的信息
                            div{
                            width:410px;
                            height:210px;
                            white-space:nowrap;
                                
                                //商品名称
                                p:nth-of-type(1){
                                width:400px;
                                height:40px;
                                padding-left:10px;
                                font-size:30px;
                                font-weight:600;
                                color:#333;
                                overflow: hidden;
                                }
                                //销量和评价
                                p:nth-of-type(2){
                                width:400px;
                                height:28px;
                                padding:10px 0 0 10px;
                                display:flex;

                                    span{
                                        width:112px;
                                        height:28px;
                                        display:block;
                                        font-size:24px;
                                        color:#999;
                                        white-space:nowrap;
                                        margin-right:20px;
                                    } 
                                }
                                //秒杀框
                                p:nth-of-type(3){
                                    width:400px;
                                    height:38px;
                                    padding:10px 0 0 10px;

                                    span{
                                        display:block;
                                        width:130px;
                                        height:28px;
                                        border-radius:5px 2px;
                                        color:#fff;
                                        font-size:24px;
                                        text-align:center;
                                        line-height:28px;
                                    }
                                    #kill1{
                                        background-color:#FF7D7D;
                                    }
                                    #drop1{
                                        background-color:#FFC837;
                                    }
                                    
                                }
                                
                                //价格和按钮
                                #btm{
                                    width:400px;
                                    height:74px;
                                    padding:10px 0 0 0;
                                    display:flex;

                                    //价格
                                    p:nth-of-type(1){
                                        width:200px;
                                        height:74px;

                                        span{
                                            width:200px;
                                            display:block;
                                            font-weight: normal;
                                        }
                                        span:nth-of-type(1){                                        
                                            height:44px;                                       
                                            font-size:36px;
                                            color:#FF7D7D;                                        
                                        }
                                        span:nth-of-type(2){                                        
                                            height:30px;                                        
                                            font-size:24px;
                                            color:#999;                                       
                                            text-decoration:line-through;
                                        }
                                    }

                                    //按钮
                                    p:nth-of-type(2){
                                        width:200px;
                                        height:56px;

                                        //左边减的按钮
                                        #span1{
                                            width:56px;
                                            height:56px;                                       
                                            background-image:url(../image/store/addNumSprite.png);
                                            background-position:-84px 0;
                                            background-repeat:no-repeat;
                                            background-size:400% 100%;
                                        }
                                        //中间的数量
                                        #num{
                                            font-size:60px;
                                            width:20px;
                                            height:56px;
                                            display:block;
                                            text-align:center;
                                            line-height:56px;
                                            font-size:30px;
                                            color:#333;
                                        }
                                        //右边加的按钮
                                        #span2{
                                            width:56px;
                                            height:56px;
                                            background-image:url(../image/store/addNumSprite.png);
                                            background-repeat:no-repeat;
                                            background-size:400% 100%;
                                        }
                                    }                                   
                                }
                            }
                        }
                    }
                }
            }           
        }
    }
</style>


